<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>修改密码</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-win.css">
<style type="text/css">
	body{
		background: #dcdcdc;
	}
	*{
		margin:0;
		padding:0;
	}
#back1{
	width: 30px;
	height: 30px;
	background:url(../../image/my/ic_back_u.png) no-repeat;
	background-size: 15px;
	position: absolute;
	left: 10px;
	top: 15px;
}
.top{
	height: 60px;
	width: 100%;
	background: #00abfd;
	line-height: 60px;
	text-align: center;
	font-size: 1.2rem;
	color: white;
	position: relative;
}
#tanChu,#tanChu1,#tanChu2,#tanChu3,#tanChu4,#tanChu5{
			border:1px solid black;
			width: 80%;
			height: 100px;
			position: absolute;
			left: 50%;
			margin-left: -40%;
			top: 50%;
			margin-top: -50px;
			background:white;
			display: none;
		}
		#tanChu_btn,#tanChu_btn1,#tanChu_btn2,#tanChu_btn3,#tanChu_btn4,#tanChu_btn5{
			display: block;
			margin-top: 20px;
			margin-left:40%;
			background:#00abfd;
			width:50px;
			height:20px;
		}
		#tanChu p,#tanChu1 p,#tanChu2 p,#tanChu3 p,#tanChu4 p,#tanChu5 p{
			height: 30px;
			line-height: 30px;
			text-align: center;
			margin-top: 20px;
		}
li input{
	width: 95%;
	height:40px;
	display: block;
	padding-left: 5%;
}
li{
	list-style: none;
}
ul p{
	height: 40px;
	width: 95%;
	padding-left: 5%;
	font-size: 1rem;
	line-height: 40px;
}
ul{
	margin-top: 50px;
}
#submit{
	width: 80%;
	height: 40px;
	border-radius: 5px;
	background: #00abfd;
	text-align:center;
	color: white;
	line-height: 40px;
	font-size: 1rem;
	margin:20px 0 0 7%;
	float: left;
}
#code{
	width: 43.5%;
	height: 40px;
	float: left;
	display: block;
}
li #achieve{
	width: 50%;
	height: 40px;
	background: #00abfd;
	float: left;
	text-align: center;
	line-height: 40px;
	color: white;
	margin-top: -1px;
	font-size: 1rem;
}
</style>
</head>
<body>
<div id="tanChu1">
<p>验证码发送失败！</p>
	<input type="button" value="确定" id="tanChu_btn1">
</div>
<div id="tanChu2">
<p>密码修改成功！</p>
	<input type="button" value="确定" id="tanChu_btn2">
</div>
<div id="tanChu3">
<p>密码修改错误，您输入有误！</p>
	<input type="button" value="确定" id="tanChu_btn3">
</div>
<div id="tanChu4">
<p>手机验证发送成功！</p>
	<input type="button" value="确定" id="tanChu_btn4">
</div>
<div id="tanChu5">
<p>数据请求失败！</p>
	<input type="button" value="确定" id="tanChu_btn5">
</div>
<div class="main">
	<header class="aui-bar aui-bar-nav aui-bar-yunzo" id="aui-header">
		<a class="aui-btn aui-bar-yunzo aui-pull-left" id="back" onclick="back_go()"> <span class="aui-iconfont aui-icon-left"></span></a>
		<div class="aui-title" id="title">
			修改密码
		</div>
		<a class="aui-iconfont aui-icon-menu aui-pull-right"></a>
	</header>
	<div class="margin_div"></div>
	<ul>
		<li><input type="text" id="current_pwd" readonly="true"></li>
		<p id="p1"></p>
		<li><input type="password" id="new_pwd" placeholder="请设置新密码"></li>
		<p id="p2"></p>
		<li><input type="password" id="determine_pwd" placeholder="请再次输入新密码"></li>
		<p id="p3"></p>
		<li><input type="text" id="code" placeholder="输入验证码"><div id="achieve">获取验证码</div></li>
		<li style="margin-bottom:30px;"><p id="submit">确定修改</p></li>
	</ul>
</div>
<!--加载loading功能-->
<div id="loadIng_startStop" style="width: 100%;height: 100%;position: absolute;z-index: 1000;display: none;">
   <div class="div_loding_img">
		数据加载中
		</div>
</div>
<script src="../../script/jquery-1.10.2.min.js"></script>
<script src="../../script/common.js"></script>
<script>
    //        /*loading加载转圈*/
    sTart_Stop();
    var code;
	var numberr;
function setCode(){
	var mid=numberr;
	var post="regmid="+mid;
	ajaxcocRequest('../../../api/account/sendCode','POST',post,function(msg){
		if(msg.code==100){
    		$("#tanChu4").show();
    		$("#tanChu_btn4").click(function(){
        		$("#tanChu4").hide();
    		})
		}
		else{
			$("body").append('<div class="wuwang"><img src="../../image/iconfont-wangluo.png"><p>网络拥堵，信息塞车</p></div>')
		}	
	});
	
	var num=60;
	to=setInterval(function(){
		$("#achieve").unbind("click",setCode);
		num=num-1;
		$('#achieve').html(num+"s后，再点击获取");
		$('#achieve').css({"font-size":"0.8rem","background":"#ccc","color":"#00abfd"});
			if(num==0){
				$("#achieve").bind("click",setCode);
				clearInterval(to);
				$('#achieve').replaceAll(" ");
				$("#achieve").html("获取验证码");
				$('#achieve').css({"font-size":"1rem","background":"#00abfd","color":"white"});
			}
	},1000)
}
$("#achieve").bind("click",setCode);

	$(document).ready(function(){
		
		ajaxcocRequest('../../../api/account/getmemberinfobymid','POST',basedata('mysetinfo'),function(msg){
			if(msg.code==100){
				
			   numberr=msg.datum.n4;
			   $("#current_pwd").val("会员账号:"+numberr);
			}
			else{
				$("body").append('<div class="wuwang"><img src="../../image/iconfont-wangluo.png"><p>网络拥堵，信息塞车</p></div>')
			}	
		});
		//提交修改密码
		var a=false;
		$("#submit").click(function(){
			if(a==true){
				var feedback=$('#new_pwd').val();
				code=$('#code').val();
				var bodyparam="mid="+$mid+"&groupid="+$groupid+"&did="+initdata.get('mysetinfo')+"&newpwd="+feedback+"&code="+code;
				ajaxcocRequest('../../../api/account/password','POST',bodyparam,function(msg){
					if(msg.code==100){
						$("#loadIng_startStop").hide();
    					$("#tanChu2").show();
    					$("#tanChu_btn2").click(function(){
        					$("#tanChu2").hide();
        					window.history.go(-1);
    					})
					}
					else{
						$("body").append('<div class="wuwang"><img src="../../image/iconfont-wangluo.png"><p>网络拥堵，信息塞车</p></div>')
					}	
				});
			}
			else{
				
			}
		})
		//返回上一层页面
		$("#back1").click(function(){
			 window.history.go(-1);
		})
		//失去焦点后判断输入密码与原密码是否相同
		$('#current_pwd').blur(function(){
			
		})
		//判断新密码格式是否正确
		$('#new_pwd').blur(function(){
			if($('#new_pwd').val()==""){
				$('#p2').css('color','red');
				$('#p2').html("密码不能为空");
			}
			else{
				//正则判断
				var re = /^[0-9a-zA-Z.,]{6,18}$/;
				if(re.test($('#new_pwd').val())==false){
					$('#p2').html("请输入6-18位数字、字母以及特殊符号 , .");
					$('#p2').css('color','red');
				}
				else{
					$('#p2').html("输入正确");
					$('#p2').css('color','blue');
					a=false;
					if($('#new_pwd').val()==$('#determine_pwd').val()){
						$('#p3').html("密码一致");
						$('#p3').css('color','blue');
						$('#p2').html("密码一致");
						$('#p2').css('color','blue');
						a=true;
					}
					if($('#new_pwd').val()!=$('#determine_pwd').val()){
						$('#p3').html("两次输入密码不一致");
						$('#p3').css('color','red');
						a=false;
					}
				}		
			}	
		})
		//聚焦后替换样式
		$('#new_pwd').focus(function(){
			$('#p2').replaceAll(" ");
			$('#p3').replaceAll(" ");
			$('#p1').replaceAll(" ");
		})
		//失焦后判断密码与输入的密码是否一致
		$('#determine_pwd').blur(function(){
			if($('#determine_pwd').val()==""){
				$('#p3').html("密码不能为空");
				$('#p3').css('color','red');
			}
			else{
				if($('#new_pwd').val()==$('#determine_pwd').val()){
					var re = /^[0-9a-zA-Z.,]{6,18}$/;
					if(re.test($('#determine_pwd').val())==false){
						$('#p3').html("请输入出现6-18位数字、字母以及特殊符号 , .");
						$('#p3').css('color','red');
					}
					else{
						$('#p3').html("密码一致");
						$('#p3').css('color','blue');
						$('#p2').html("密码一致");
						$('#p2').css('color','blue');
						a=true;
					}
				}
				else{
					$('#p3').html("两次输入密码不一致");
					$('#p3').css('color','red');
					a=false;
				}
			}
		})
		//聚焦后替换样式
		$('#determine_pwd').focus(function(){
			$('#p2').replaceAll(" ");
			$('#p3').replaceAll(" ");
			$('#p1').replaceAll(" ");
		})


	});

</script>
</body>
</html>